import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormControl, FormGroup } from '@angular/forms';
import { NzDrawerService } from 'ng-zorro-antd/drawer';
import { SysMenuService } from 'src/app/service/sys-menu.service';
import { SysMenu } from '../../../model/sys-menu.model';
import { DataFormComponent } from '../../common/data-form/data-form.component';


@Component({
  selector: 'app-sys-menu',
  templateUrl: './sys-menu.component.html',
  styleUrls: ['./sys-menu.component.less']
})


export class SysMenuComponent implements OnInit {

  total = 1;
  loading = false;

  query = {
    page: '1',
    limit: '20'
  };

  menuList: SysMenu[];

  // 定义表格

  constructor(private nzDrawerService: NzDrawerService, private fb: FormBuilder,
    private sysMenuService: SysMenuService) {
  }

  /**
   * 初始化时加载数据
   */
  loadData() {
    this.sysMenuService.getSysMenuList().subscribe((res: any) => {
      this.menuList = res.data
      //组装tree数据
      this.menuList.forEach(item => {
        this.mapOfExpandedData[item.id] = this.convertTreeToList(item);
      });
    });
  }

  showDetail(id: string) {
    // 查询具体用户数据
    /*    this.sysUserService.getSysUserById(id).subscribe((res: any) => {
          const userDetail = res.data;
          this.nzDrawerService.create({
            nzTitle: '详情',
            nzWidth: 1024,
            nzContent: DataFormComponent,
            nzContentParams: {
              data: userDetail,
              keys: Object.keys(userDetail)
            }
          });
        });*/
  }

  edit(id: string) {
    this.sysMenuService.getSysMenuById(id).subscribe((res: any) => {
      const detail = res.data;
      let drawerRef = this.nzDrawerService.create({
        nzTitle: '修改',
        nzWidth: 1024,
        nzContent: DataFormComponent,
        nzContentParams: {
          edit: true,
          data: detail,
          keys: Object.keys(detail),
          editFunction: () => {
            this.sysMenuService.updateSysMenu(detail).subscribe((res: any) => {
              // 刷新主表数据
              this.loadData();
              // 关闭抽屉
              drawerRef.close()
            })
          }
        },
      });

    });
  }


  mapOfExpandedData: { [key: string]: SysMenu[] } = {};

  collapse(array: SysMenu[], data: SysMenu, $event: boolean): void {
    if (!$event) {
      if (data.children) {
        data.children.forEach(d => {
          const target = array.find(a => a.id === d.id)!;
          target.expand = false;
          this.collapse(array, target, false);
        });
      } else {
        return;
      }
    }
  }

  convertTreeToList(root: SysMenu): SysMenu[] {
    const stack: SysMenu[] = [];
    const array: SysMenu[] = [];
    const hashMap = {};
    stack.push({ ...root, level: 0, expand: false });

    while (stack.length !== 0) {
      const node = stack.pop()!;
      this.visitNode(node, hashMap, array);
      if (node.children) {
        for (let i = node.children.length - 1; i >= 0; i--) {
          stack.push({ ...node.children[i], level: node.level! + 1, expand: false, parent: node });
        }
      }
    }

    return array;
  }

  visitNode(node: SysMenu, hashMap: { [id: string]: boolean }, array: SysMenu[]): void {
    if (!hashMap[node.id]) {
      hashMap[node.id] = true;
      array.push(node);
    }
  }

  ngOnInit(): void {
    this.loadData();
  }

}
